<template>
	<view class="shopBox">
		<view class="imgs">
			<!-- #ifdef H5 -->
			<trigger-lazyLoad :src="base_static+props.data.img" />
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<image :src="base_static+props.data.img"></image>
			<!-- #endif -->

		</view>
		<view class="content_text title">
			{{props.data.goodsname}}
		</view>
		<view class="content_text content_tags">
			<template v-for="(v,i) in props.data.tagList">
				<view :class="i%2==0?'blue':'green'">{{v.name}}</view>
			</template>
		</view>
		<view class="content_text price">
			￥<text>{{props.data.price}}</text>
		</view>
		<view class="content_text">
			<view class="banners">
				码上出发 让旅游更简单
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"


	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		}
	})


	// onShow(() => {

	// })
</script>

<style lang="less">
	.shopBox {
		width: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		background: #fff;
		padding-bottom: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.imgs {
			width: 100%;
			overflow: hidden;
			height: 240rpx;
		}

		.content_text {
			padding: 0 14rpx;
			box-sizing: border-box;
			padding-top: 8rpx;
		}

		.content_tags {
			display: flex;
			flex-wrap: wrap;
			font-size: 12rpx;

			view {
				border: 1rpx solid pink;
				padding: 2rpx 5rpx;

				border-radius: 10rpx;
			}

			.green {
				color: #67c23a;
				border-color: #67c23a;
			}

			.blue {
				color: #00afcc;
				border-color: #00afcc;
			}

			view+view {
				margin-left: 5rpx;
			}
		}

		.title {

			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			
		}

		.price {
			font-size: 22rpx;
			color: orangered;

			text {
				font-size: 34rpx;
				font-weight: 600;
			}
		}

		.banners {
			width: 100%;
			// #e6f5f9 
			line-height: 60rpx;
			font-size: 24rpx;
			color: #00afcc;
			padding-left: 8rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background: linear-gradient(80deg, #e6f5f9, rgba(0, 0, 0, 0));
		}
	}
</style>